<template>
    <!-- 底部 -->
    <footer class="footer">
        <div class="shopname"><span class="iconfont icon-dianpu"></span><br/>店铺</div>
        <div class="contact"> <span class="iconfont icon-icon_huabanfuben"></span><br/> 
                联系卖家
        </div>
        <a href="#" class="addshopcar" @click="showCar">加入购物车</a>
        <a href="#" class="purchase">立即购买</a>
        <router-view></router-view>
    </footer>
</template>

<script>
export default {
    data(){
        return{

        }
    },
        methods:{
            showCar(){
                this.$store.state.isShowShopCar=true;
            }
        }
}
</script>

<style scoped lang="less">
    //底部
.footer{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    .shopname{
        display: block;
        float: left;
        width: 20%;
        text-align: center;
        box-sizing: border-box;
    }
    .contact{
        width: 20%;
        text-align: center;
        display: block;
        float: left;
    }
  .iconfont{
            font-size: 22px;
        }
    .addshopcar{
        display: block;
        float: left;
        width: 30%;
        line-height: 50px;
        background-color: #f8654f;
        color: #fff;
        font-size: 18px;
        text-align: center;
        box-sizing: border-box;
    }.purchase{
        display: block;
        float: left;
        width: 30%;
        line-height: 50px;
        background-color: #f8654f;
        color: #fff;
        font-size: 18px;
        text-align: center; 
        box-sizing: border-box; 
    }
    .addshopcar{
        border-right:1px #ccc solid;
    }
    }
</style>